<!--{include(pe_tpl('header.html'));}-->
<div class="right_page">
	<div class="now">
		<a href="javascript:;" class="sel">{$menutitle}<i></i></a>
		<div class="clear"></div>
	</div>
	<form method="post" id="form">
	<div class="right_main">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wenzhang mat20 mab20">
		<tr>
			<td align="right" width="200">模板名称：</td>
			<td><input type="text" name="wlmb_name" value="{$info['wlmb_name']}" class="inputall input200" /></td>
		</tr>
		<tr>
			<td align="right">计费方式：</td>
			<td>
				<!--{foreach($ini['wlmb_type'] as $k=>$v):}-->
				<label class="mar30"><input type="radio" name="wlmb_type" value="{$k}" class="inputfix" <!--{if($k==$info['wlmb_type']):}-->checked="checked"<!--{endif;}--> {$disabled} /> {$v}</label>
				<!--{endforeach;}-->
			</td>
		</tr>
		<tr>
			<td align="right">运费设置：</td>
			<td>
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list_border" id="data_html">
				<tr>
					<th class="bgtt" width="">配送区域</td>
					<th class="bgtt" width="100" id="js_name1">首件</td>
					<th class="bgtt" width="100">运费(元)</td>
					<th class="bgtt" width="100" id="js_name2">续件</td>
					<th class="bgtt" width="100">续费(元)</td>
					<th class="bgtt" width="80">操作</td>
				</tr>
				<!--{foreach($wlmb_data as $v):}-->
				<!--{$city = $v['city'] ? explode(',', $v['city']) : array()}-->
				<tr class="tag_html">
					<td class="left" onclick="tag_open(this)">
						<div class="tag_list">
							<!--{foreach($city as $vv):}--><span>{$vv}</span><!--{endforeach;}-->
							<div class="clear"></div>
						</div>
						<input type="hidden" name="city[]" value="{$v['city']}" class="tag_input" />	
					</td>
					<td><input type="text" name="value[]" value="{$v['value']}" class="inputtext input50" /></td>
					<td><input type="text" name="money[]" value="{$v['money']}" class="inputtext input50" /></td>
					<td><input type="text" name="value2[]" value="{$v['value2']}" class="inputtext input50" /></td>
					<td><input type="text" name="money2[]" value="{$v['money2']}" class="inputtext input50" /></td>
					<td><a href="javascript:;" onclick="data_del(this)" class="admin_btn">删除</a></td>
				</tr>
				<!--{endforeach;}-->
				<script type="text/html" id="data_tpl">
				<tr class="tag_html">
					<td class="left" onclick="tag_open(this)">
						<div class="tag_list"></div>
						<input type="hidden" name="city[]" value="" class="tag_input" />
					</td>
					<td><input type="text" name="value[]" value="" class="inputall input50" /></td>
					<td><input type="text" name="money[]" value="" class="inputall input50" /></td>
					<td><input type="text" name="value2[]" value="" class="inputall input50" /></td>
					<td><input type="text" name="money2[]" value="" class="inputall input50" /></td>
					<td><a href="javascript:;" onclick="data_del(this)" class="admin_btn">删除</a></td>
				</tr>
				</script>		
				</table>
				<a href="javascript:;" onclick="data_add()" class="admin_btn mat10" style="padding:5px 5px">添加配送区域</a>
			</td>
		</tr>
		</table>
	</div>
	<div class="right_bottom center">
		<input type="hidden" name="pe_token" value="{$pe_token}" />
		<input type="hidden" name="pesubmit" value="{$pe_token}" />
		<input type="button" value="提 交" class="tjbtn">
	</div>
	</form>
</div>
<script type="text/javascript">
var tag_html;
var tag_list = {$city_list};
$(function(){
	if ($("#data_html tr").length == 1) data_add();
	$(":input=[name='wlmb_type']").change(function(){
		wlmb_type_callback();
	})
	$(":input=[name='wlmb_type']").change();
	$(":button").click(function(){
		pe_submit("{pe_nowurl()}", function(json){
			if (json.code == 1) pe_open('back', 1000);
		});
	})
})
function wlmb_type_callback() {
	if ($(":input[name='wlmb_type']:checked").val() == 'weight') {
		$("#js_name1").html('首重(Kg)')
		$("#js_name2").html('续重(Kg)')
	}
	else {
		$("#js_name1").html('N件内')
		$("#js_name2").html('续件')	
	}
}
function data_add() {
	$("#data_html").append($("#data_tpl").html());
	$("#data_html tr").show();
}
function data_del(_this) {
	$(_this).parents("tr").eq(0).remove();
}
function tag_open(_this) {
	var html = '';
	tag_html = $(_this).parent("tr");
	var tag_sel = tag_html.find(".tag_input").val();
	var tag_lock = '';
	$(".tag_html .tag_input").each(function(i){
		tag_lock += $(this).val() + ',';
	})
	tag_list.forEach(function(v){
		if (tag_sel.indexOf(v) >= 0) {
			html += '<a href="javascript:;" onclick="tag_btn(this)" class="sel">'+v+'</a>';		
		}
		else if (tag_lock.indexOf(v) >= 0) {
			html += '<a href="javascript:;" class="lock">'+v+'</a>';		
		}
		else {
			html += '<a href="javascript:;" onclick="tag_btn(this)">'+v+'</a>';		
		}
	})
	layer.open({
		type: 1,
		title: '选择城市',
		area: ['800px', '400px'],
		fixed: false, //不固定
		shadeClose: false,
		shade: 0.5,
		id: 'tag_box',
		content: html
	});
}

function tag_btn(_this) {
	var tag_input_arr = [];
	var tag_list_new = '';
	if ($(_this).hasClass("sel")) {
		$(_this).removeClass("sel");
	}
	else {
		$(_this).addClass("sel");
	}
	$("#tag_box a.sel").each(function(){
		tag_input_arr.push($(this).text());
	})
	tag_html.find(".tag_input").val(tag_input_arr.join(','));
	tag_input_arr.forEach(function(v){
		if (v != '') tag_list_new += '<span>'+v+'</span>';
	})
	tag_html.find(".tag_list").html(tag_list_new);
}
</script>
<style type="text/css">
.tag_html{position:relative; font-size:13px}
.tag_list{height:100%; width:100%; display:block}
.tag_list span{background:#02aec7;float:left; height:1em; line-height:1em; padding:5px 7px;margin:0 5px 10px 0; box-shadow:0 0 5px #ddd; border-radius:2px; color:#fff;}
#tag_box{padding:20px}
#tag_box a{float:left; height:1em; line-height:1em; padding:7px; margin:0 10px 15px 0; color:#666; width:120px;}
#tag_box a.lock{background:#f1f2f3; box-shadow:0 0 5px #ddd; border-radius:2px; color:#ccc; text-decoration:line-through}
#tag_box a.sel{background:#02aec7; box-shadow:0 0 5px #ddd; border-radius:2px; color:#fff;}
</style>
<!--{include(pe_tpl('footer.html'));}-->